<script setup lang="ts">
import { computed } from "vue";
import useLoginStore from "@/stores/modules/login/login";
import { localCache } from "@/utils/cache";
import { LOGIN_TOKEN } from "@/constants";
import router from "@/router";

const loginStore = useLoginStore();
const userInfo = computed(() => loginStore.userInfo);

const handleLogout = () => {
  localCache.removeCache(LOGIN_TOKEN);
  router.push("/login");
};
</script>

<template>
  <div class="header-info">
    <div class="operation">
      <el-icon size="20">
        <Bell />
      </el-icon>
      <el-icon size="20">
        <ChatDotRound />
      </el-icon>
      <el-icon size="20">
        <Postcard />
      </el-icon>
    </div>

    <el-dropdown>
      <div class="user-info">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        {{ userInfo.name }}
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon>
              <InfoFilled />
            </el-icon>
            个人信息
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon>
              <Unlock />
            </el-icon>
            修改密码
          </el-dropdown-item>
          <el-dropdown-item divided @click="handleLogout">
            <el-icon>
              <SwitchButton />
            </el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped lang="less">
.header-info {
  display: flex;

  .operation {
    display: flex;
    align-items: center;

    .el-icon {
      width: 40px;
      height: 40px;
      cursor: pointer;

      &:hover {
        color: #409eff;
        background: rgba(64, 158, 255, 0.1);
      }
    }
  }

  .el-dropdown {
    :focus-visible {
      outline: none;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding-right: 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;

      &:hover {
        background: rgba(64, 158, 255, 0.1);
      }
    }
  }
}
</style>
